<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <TinymceEditor @getId='getId' ref="editor" v-model="modelValue.subjectEditorValue"
          :subjectContentPreview="modelValue.subjectContentPreview" :height="200" v-if="showEditor" />
      </div>
    </el-row>
    <el-row class="hoverOptions pt10 pb10" v-for="(item, i) in modelValue.options" :key="item.optionUuid">

      <div class="center" style="width:80px">
        <el-checkbox style="margin-right:4px" v-model="item.isAnswer" @change="optChange(i)"></el-checkbox>
        {{ String.fromCharCode(i + 65) }}:
      </div>
      <el-col :span="modelValue.questionTypeBase == 'any_xuan' ? 18 : 20">
        <TinymceEditor v-if="showEditor" @getId='getId' v-model="item.optionTextValue" :height="50" />
      </el-col>
      <el-col :span="2" class="center2" v-if="modelValue.questionTypeBase == 'any_xuan'">
        <span>
          <el-input :disabled="!item.isAnswer" v-model.trim="item.optionPercentValue"
            style="width:50px;margin-left:4px"></el-input>%
        </span>
      </el-col>
      <el-col :span="1" class="center">
        <el-tooltip effect="light" content="选项反馈" placement="top-start">
          <el-icon class="feedbackIcon" @click="feedback(i)">
            <Position />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col :span="1" class="center">
        <el-tooltip effect="light" content="删除" placement="top-start">
          <el-icon class="feedbackIcon" @click="danxuanClearOpt(i)">
            <Delete />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col v-if="item.optionTipEditorShow">
        <el-row class="feedback">
          选项反馈：
          <div class="editorBox">
            <TinymceEditor v-if="showEditor" @getId='getId' ref="editor" v-model="item.optionTipEditorValue"
              :height="50" />
          </div>
        </el-row>
      </el-col>
    </el-row>
    <div class="tigan"></div>

    <el-row style="padding-top:6px">
      <el-col :span="24">
        <el-button type="primary" plain :icon="Plus" text @click="danxuanAddOpt">添加选项</el-button>
        <el-button type="primary" :icon="Plus" text @click="addAnalysis" plain>添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row v-if="modelValue.explainEditorShow || modelValue.explainEditorValue.length > 0" class="jiexi2">
      试题解析：
      <div class="editorBox">
        <TinymceEditor v-if="showEditor" @getId='getId' ref="editor" v-model="modelValue.explainEditorValue"
          :height="80" />
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { uuid } from 'vue3-uuid'
import {
  CirclePlus,
  Plus,
  CloseBold,
  ArrowDownBold,
  Document,
  View,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";

import TinymceEditor from '../component/Editor/index.vue'
const { ctx, proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue'])
const { scrollToElement, showEditor } = toRefs(reactive({
  scrollToElement: null,
  showEditor: true
}))
onMounted(() => {


})
const getId = (id) => {
  // scrollToElement.value = document.getElementById(id);

  // window.scrollTo({
  //   top: 20,
  //   behavior: 'smooth'
  // });
}
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
})
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}
const optChange = (val) => {
  //选择题正确选项
  if (props.modelValue.questionTypeBase == 'dan_xuan') {
    props.modelValue.options.forEach((item, i) => {
      if (i != val) {
        item.isAnswer = false
      }
    })
  }
}
const feedback = (val) => {
  //选项反馈
  props.modelValue.options[val].optionTipEditorShow =
    !props.modelValue.options[val].optionTipEditorShow
}
const danxuanClearOpt = (i) => {
  if (props.modelValue.options.length == 1)return ElMessage.error('已达到最少数量！')
  props.modelValue.options.splice(i, 1)
  showEditor.value = false
  sortIndex()
  setTimeout(()=>{
    showEditor.value = true
  },100)
  
}
const sortIndex = () => {
  //选项重新排序
  props.modelValue.options.forEach((item, i) => {
    item.optionIndex = i + 1
  })
}
const danxuanAddOpt = () => {
  //单选添加选项
  if (props.modelValue.options.length == 10)
    return ElMessage.error('已达到最大数量！')
  props.modelValue.options.push({
    optionUuid: uuid.v4(),
    optionIndex: props.modelValue.options.length + 1,
    optionTipEditorValue: '',
    optionTextValue: '',
    isAnswer: false,
    optionTipEditorShow: false,
  })
  sortIndex()
}
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>

<style scoped>
.tigan {
  border-bottom: 1px dashed #dcdfe8;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center2 {
  display: flex;
  align-items: center;
}

.addBtn {
  color: #67c23a;
  border-color: #67c23a;
}

.hoverOptions:hover .feedbackIcon {
  color: #409eff !important;
}
</style>